<template>
  <div :style="{ height: chartHeight + 'px' }" class="static-overview-wrap">
    <div class="right">
      <el-radio-group v-model="radio">
        <el-radio-button label="1">{{$t('model.lastWeek')}}</el-radio-button>
        <el-radio-button label="2">{{$t('model.lastMonth')}}</el-radio-button>
        <el-radio-button label="3">{{$t('model.last3Month')}}</el-radio-button>
      </el-radio-group>
      <el-date-picker v-model="date" :picker-options="pickerOptions" type="daterange" range-separator="-" unlink-panels
        :clearable="false" value-format="yyyy-MM-dd" style="width:260px;height:27px"
        @change="getData"> </el-date-picker>
    </div>
    <h5>{{ $t('model.inOutView') }}</h5>
    <div class="chart-content">
      <div class="chart-body">
        <ve-histogram :data="chartData" :height="(chartHeight - 40) + 'px'" :settings="chartSetting" :tooltip="tooltip"
          :legend="legend" :judge-width="true"></ve-histogram>
      </div>
      <div class="chart-static">
        <p class="static-title">{{$t('model.outTotal')}}</p>
        <p class="big">{{ returnData?.receiptTotal }}</p>
        <p>{{ $t('model.yony') }}{{ getStatus(returnData?.receiptQOQ) > 0 ? $t('model.up') : $t('model.down') }}
          <span :class="getStatus(returnData?.receiptQOQ) > 0 ? 'up' : 'down'">
            <i :class="getStatus(returnData?.receiptQOQ) > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
            {{ returnData?.receiptQOQ }} </span>
        </p>
        <p>{{ $t('model.monm') }}{{ getStatus(returnData?.receiptYOY) > 0 ? $t('model.up') : $t('model.down') }}
          <span :class="getStatus(returnData?.receiptYOY) > 0 ? 'up' : 'down'">
            <i :class="getStatus(returnData?.receiptYOY) > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
            {{ returnData?.receiptYOY }}</span>
        </p>
        <p class="static-title">{{$t('model.inTotal')}}</p>
        <p class="big">{{ returnData?.orderTotal }}</p>
        <p>{{ $t('model.yony') }}{{ getStatus(returnData?.orderQOQ) > 0 ? $t('model.up') : $t('model.down') }}
          <span :class="getStatus(returnData?.orderQOQ) > 0 ? 'up' : 'down'">
            <i :class="getStatus(returnData?.orderQOQ) > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
            {{ returnData?.orderQOQ }}</span>
        </p>
        <p>{{ $t('model.monm') }}{{ getStatus(returnData?.orderYOY) > 0 ? $t('model.up') : $t('model.down') }}
          <span :class="getStatus(returnData?.orderYOY) > 0 ? 'up' : 'down'">
            <i :class="getStatus(returnData?.orderYOY) > 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
            {{ returnData?.orderYOY }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "chart",
  props: {
    chartHeight: {
      type: Number,
      default: 400
    }
  },
  data() {
    return {
      radio: "1",
      date: [],
      returnData: null,
      chartSetting: {
        labelMap: { inbound: this.$t('config.inbound'), outbound: this.$t('config.outbound') }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        bottom: 20
      },
      pickerOptions: {
        disabledDate(date) {
          return new Date(date).getTime() >= new Date(
            moment().subtract(1, 'd').format('YYYY-MM-DD')
          ).getTime()
        }
      },
    }
  },
  computed: {
    chartData() {
      let rows = [], result = [];
      const diffDay = moment(this.date[1]).diff(moment(this.date[0]), 'd');
      for (let d = 0; d <= diffDay; d++) {
        rows.push({ date: moment(this.date[0]).add(d, 'd').format('YYYY-MM-DD'), inbound: 0, outbound: 0 })
      }
      if (diffDay > 7) {
        const geomean = diffDay / 7;
        let dateArr = new Array(7);
        for (let i = 0; i < dateArr.length; i++) {
          dateArr[i] = Math.round(geomean * i);
          result.push(rows[dateArr[i]]);
        }
        result.push(rows[rows.length - 1])
      } else {
        result = rows
      }
      if (this.returnData) {
        this.returnData.list.forEach(rd => {
          const key = rd.mainDataType == 15001 ? 'inbound' : 'outbound';
          const i = result.findIndex(item => item.date == rd.summaryDate);
          if (i > -1) {
            result[i][key] = rd.dataValue;
          }
        });
      }
      return {
        columns: ['date', 'inbound', 'outbound'],
        rows: result
      }
    },
  },
  methods: {
    getStatus(val) {
      return val && val.startsWith("-") ? -1 : 1;
      // return val.startsWith("-") ? this.$t('model.down') : this.$t('model.up');
    },
    getData() {
      const beginSummaryDate = this.date[0];
      const endSummaryDate = this.date[1];
      this.$post("/dataMainDataSum/selectDataMainDataSumList", { beginSummaryDate, endSummaryDate }).then(res => {
        this.returnData = res.data;
      })
    }
  },
  watch: {
    radio: {
      handler(val) {
        if (val == 1) {
          this.date = [moment().subtract(7, 'd').format('YYYY-MM-DD'), moment().subtract(1, 'd').format('YYYY-MM-DD')];
        } else if (val == 2) {
          this.date = [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().subtract(1, 'd').format('YYYY-MM-DD')];
        } else if (val == 3) {
          this.date = [moment().subtract(3, 'M').format('YYYY-MM-DD'), moment().subtract(1, 'd').format('YYYY-MM-DD')];
        }
        this.getData()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.static-overview-wrap{
  .chart-content {
    display: flex;
    align-items: center;
    font-size: 14px;
  
    .chart-body {
      flex: 1;
    }
  
    .chart-static {
      width: 300px;
      padding: 20px;
  
      p {
        color: #b1b1b1;
      }
  
      .static-title {
        color: #000
      }
  
      .big {
        font-size: 2em;
        font-weight: 600;
        color: #000;
      }
  
      .up {
        margin-left: 2em;
        color: #da1027;
      }
  
      .el-icon-top {
        padding: 4px;
        background: #f6bcbd;
        border-radius: 50%;
      }
  
      .down {
        margin-left: 2em;
        color: #14ad78;
      }
  
      .el-icon-bottom {
        padding: 4px;
        background: #bbe9db;
        border-radius: 50%;
      }
    }
  }
 .el-radio-button:last-child .el-radio-button__inner{
    border-radius: 0;
    border-right: 0;
  }
  .el-input__inner{
    border-radius: 0 4px 4px 0;
  }
}
</style>